<template>
  <div class="product__meg">
    <div>
      <h2 class="product__meg__title">{{ info.seriesTitle }}</h2>
      <p class="product__meg__des">
        {{ info.seriesSubTitle }}
      </p>
      <span class="product__meg__price">{{ info.coin }}积分</span>
    </div>
    <div
      class="product__type"
      v-for="(item, index) in parameterJson"
      :key="index"
    >
      <p class="product__type__color">选择{{ item.title }}</p>
      <ul class="product__type__colorlist">
        <li
          v-for="citem in item.parameters"
          :key="citem.id"
          :class="{ current: citem.currentActivate }"
          @click="changeProduct(citem.id)"
        >
          {{ citem.title }}
        </li>
      </ul>
    </div>
    <div class="product__operate">
      <p class="product__operate__title">数量</p>
      <div class="product__operate__num">
        <i @click="stepFn(1)">+</i>
        <span>{{ num }}</span>
        <i @click="stepFn(-1)">-</i>
        <div>库存: {{ info.stock }}</div>
      </div>
      <div class="product__operate__pay">
        <span @click="addCart">加入购物车</span>
        <span>立即购买</span>
      </div>
      <div class="product__operate__love">
        <img src="../../assets/img/love.png" alt="" />
        <span>喜欢 {{ info.like }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { Details, addCartShop } from "../../utils/api";
import { mapActions, mapMutations } from "vuex";
export default {
  name: "ProductMeg",
  props: ["info", "parameterJson"],
  data() {
    return {
      num: 1,
      curId: "",
    };
  },
  methods: {
    ...mapActions("showToast", ["asyncChangeStatus"]),
    ...mapActions("userInfo", ["asyncGetUserInfo"]),
    ...mapActions("cartShop", ["asyncAddCart"]),
    ...mapMutations("cartShop", ["addCartShop"]),
    async changeProduct(id) {
      // 商品不存在不跳转
      const details = await Details(id);
      if (details.code == 400)
        return this.asyncChangeShowToast({
          content: details.message,
          type: "danger",
        });
      router.push({
        params: { id },
        name: "Details",
      });
    },
    stepFn(val) {
      if (this.info.stock == this.num && val == 1)
        return this.asyncChangeStatus({
          content: "超过了最大库存数",
          type: "info",
        });
      if (this.num == 5 && val == 1)
        return this.asyncChangeStatus({
          content: "该商品最多限购五件",
          type: "info",
        });
      if (this.num == 1 && val == -1)
        return this.asyncChangeStatus({
          content: "不能再少了",
          type: "info",
        });
      this.num += val;
    },
    async addCart() {
      if (!localStorage.getItem("x-auth-token"))
        return this.asyncChangeStatus({
          content: "你还没有登录",
          type: "info",
        });
      const res = await addCartShop({
        productId: this.curId,
        total: this.num,
        modified: 1,
      });
      if (res.code == 400)
        return this.asyncChangeStatus({
          content: "选中的商品Id不存在",
          type: "danger",
        });
      if (res.code == 0) {
        this.asyncChangeStatus({
          content: "添加成功",
          type: "success",
        });
        this.asyncGetUserInfo();
        this.num = 1;

        // this.addCartShop(res.data);
      }
    },
  },
  watch: {
    "$route.fullPath": {
      immediate: true,
      handler() {
        this.num = 1;
        this.curId = Number(this.$route.params.id);
      },
    },
  },
};
</script>

<style lang='less' scoped>
.product__meg {
  margin-right: 49px;
  width: 429px;
  &__title {
    font-size: 28px;
    font-weight: 400;
    color: #000000;
  }
  &__des {
    margin: 15px 0 23px;
    font-size: 14px;
    font-weight: 300;
    color: #999999;
    line-height: 20px;
  }
  &__price {
    font-size: 28px;
    font-weight: bold;
    color: #fd604d;
    line-height: 23px;
    display: block;
    padding-bottom: 23px;
    border-bottom: 1px solid #ececec;
  }
}
.product__type {
  &__color {
    font-size: 16px;
    font-weight: 300;
    color: #000000;
    line-height: 23px;
    margin: 19px 0 14px;
  }
  &__colorlist {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 0 17px;
      height: 32px;
      border: 1px solid #ddd;
      margin: 0 20px 11px 0;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      font-weight: 300;

      cursor: pointer;
    }
    .current {
      color: #0a328e;
      border: 1px solid #0a328e;
    }
  }
}
.product__operate {
  &__title {
    font-size: 16px;
    font-weight: 300;
    color: #000000;
    line-height: 23px;
    margin: 20px 0 15px;
  }
  &__num {
    display: flex;
    line-height: 30px;
    text-align: center;
    margin-bottom: 24px;
    height: 30px;
    i {
      display: inline-block;
      cursor: pointer;
      font-size: 20px;
      color: #999;
      width: 30px;
      border: 1px solid #d1d1d1;
      background-color: #fff;
    }
    span {
      display: inline-block;
      width: 45px;
      border-top: 1px solid #d1d1d1;
      border-bottom: 1px solid #d1d1d1;
      background-color: #eee;
      font-size: 14px;
    }
    div {
      width: 60px;
      background-color: #eee;
      color: #444;
      margin-left: 10px;
      padding: 0 6px;
    }
  }
  &__pay {
    display: flex;
    span {
      width: 150px;
      text-align: center;
      height: 46px;
      line-height: 46px;
      font-size: 18px;
      font-weight: 300;
      color: #ffffff;
      margin-bottom: 25px;
      cursor: pointer;
      &:nth-of-type(1) {
        background-color: #3dc36b;
        margin-right: 19px;
      }
      &:nth-of-type(2) {
        background-color: #fd604d;
      }
    }
  }
  &__love {
    img {
      margin-right: 12px;
      cursor: pointer;
    }
    display: flex;
    align-items: center;
  }
}
</style>